<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
  <title>3d相册</title>

  <script src="./js/babylon.2.4.js"></script>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/game.js"></script>
  <script src="./js/index.js"></script>
  <script src="./js/utils.js"></script>
  <script src="./js/math.js"></script>
  <script src="./js/formation.js"></script>
  <script src="./js/animation.js"></script>
  <script src="./js/particle.js"></script>
  <link href="./css/index.css" rel="stylesheet" type="text/css" media="all">
  <script>
    var game;
    var formationType = 0;
    window.addEventListener('DOMContentLoaded', function() {

      var canvas = document.getElementById('renderCanvas');
      var engine = new BABYLON.Engine(canvas, true);

      engine.displayLoadingUI();
      setTimeout(function() {

        game = createGame(engine);
        startCamera(game.picArray);

        //添加声音
        var hasSoundLoaded = false;
        var hasParticleLoaded = false;
        var atmosphere = new BABYLON.Sound("Ambient", "http://of9yu7l0x.bkt.clouddn.com/audio/html53d/yydlt.mp3", game.scene, function() {
          hasSoundLoaded = true;
          if (hasParticleLoaded == true) {
            engine.hideLoadingUI();
            actionTimer();
          }
        }, {
          loop: true,
          autoplay: true
        });

        loadParticle(game.scene);

        hasParticleLoaded = true;
        if (hasSoundLoaded == true) {
          engine.hideLoadingUI();
          actionTimer();
        }

      }, 1000);

      window.addEventListener('resize', function() {
        game.engine.resize();
      });

    });
  </script>

  <script>
    var mesh_index = 0

    function hello() {
      var type = 0;
      if (mesh_index % 5 == 4) {
        type = 1;
      }

      cameraTo(game.camera, game.picArray[mesh_index], type);
      mesh_index++;
      if (mesh_index == 144) {
        mesh_index = 0;
      }
    }

    //定时事件
    function actionTimer() {
      var t2 = window.setInterval("hello()", 8000);
    }
  </script>

</head>

<body>
  <canvas id="renderCanvas"></canvas>
  <div style="position:absolute; top:5px; left:5px;">
    <!--<input type="button" onclick="startAnimation()" value="变换矩阵" />-->
  </div>
</body>

</html>
